<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<style> .page {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 10px; /* text-align 行内块元素水平居中 */
    text-align: center;
}

.page-num {
    font-size: 20px;
    font-weight: bold;
}

.page-num a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 700;
    border-radius: 8px;
}

.page-num a, .page-num em {
    display: inline-block;
    width: 28px;
    height: 28px; /*border: 1px solid #cccccc;*/
    line-height: 28px;
    font-size: 14px;
}

/* 此处注意优先级 */
.page-num .pn-prev, .page-num .pn-next {
    width: 86px;
    background-color: #76afe8;
}

.page-num .current-page, .page-num .dot-page {
    border: transparent;
}

/* 按钮禁用 */
.page-num .disabled { /*background-color: #f1f0f0;*/
    cursor: not-allowed;
    filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
    -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
    opacity: 0.5; /*其他，透明度50%*/
    color: #cccccc;
}

/* 页面挑转 */
.page-skip input {
    width: 36px;
    height: calc(32px - 4px);
    text-align: center;
    outline: none;
    border: 1px solid #cccccc; /* 过渡 */
    transition: all 0.5s;
}

.page-skip button {
    width: 56px;
    height: 28px;
    background-color: #76afe8;
    border-radius: 8px;
    border: none;
    color: #fff;
    font-weight: bold;
}

/* 扩展输入框*/ /* 去掉outline */
.page-skip input:focus {
    width: 86px;
    border: 1px solid skyblue;
} </style>
<!-- 分页 -->
<div class="page">
    <span class="page-num">
        <a class="pn-prev
<c:if test="${pageBean.currentPage == 1 }">disabled</c:if>"
                <c:if test="${pageBean.currentPage != 1 }">
                    href="${ctx}${param.url }?currentPage=${ pageBean.currentPage-1
                        }"
                </c:if> >上一页</a> [ 第 ${pageBean.currentPage} 页 / 共 ${pageBean.totalPage} 页 ]

           <a class="pn-next <c:if test="${pageBean.currentPage == pageBean.totalPage }">disabled</c:if>"

                   <c:if test="${pageBean.currentPage != pageBean.totalPage }"> href="${ctx}${param.url }?currentPage=${ pageBean.currentPage+1 }" </c:if> >下一页</a> </span>
    <span class="page-skip"> 跳转到 <input type="text"> 页<button>确定</button>
    </span>
    /div>